<template>
  <div class="bgOrderSelectVehiclesMain h100">
    <div class="bgOrderSelectVehiclesMainTop">
      <a-radio-group :value="formData.vehicleSourceType" @change="changeSelectType">
        <a-radio :value="1" style="margin-right:90px;">
          {{ $t('multiSelect') }}
        </a-radio>
        <a-radio :value="3">
          {{ $t('fromFile') }}
        </a-radio>
      </a-radio-group>
    </div>
    <div class="bgOrderSelectVehiclesMainContent">
      <keep-alive>
        <component :is="mainContentCompName" ref="dynamicComp">
        </component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import BgOrderSelectVehiclesMainMultiType from './BgOrderSelectVehiclesMainMultiType'
import BgOrderSelectVehiclesMainFromFile from './BgOrderSelectVehiclesMainFromFile'
import { mapGetters } from 'vuex'
export default {
  components: {
    BgOrderSelectVehiclesMainMultiType,
    BgOrderSelectVehiclesMainFromFile
  },
  props: {
    time: {
      type: Number,
      default: 10230
    },
    isBack: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters(['drawerOpenTime']),
    formData () {
      return this.$store.state.orderManagement.bgOrderFormData
    },
    mainContentCompName () {
      if (this.formData.vehicleSourceType === 1) {
        return 'BgOrderSelectVehiclesMainMultiType'
      // eslint-disable-next-line no-else-return
      } else if (this.formData.vehicleSourceType === 3) {
        return 'BgOrderSelectVehiclesMainFromFile'
      }
      return ''
    }
  },
  data () {
    return {
      // multiSelect 批量选择 fromFile 来自文件
      selectType: 'multiSelect'
    }
  },
  watch: {
    drawerOpenTime: {
      handler () {
        if (this.isBack) {

        } else {
          this.resetData()
        }
      },
      immediate: true
    }
  },
  methods: {
    changeSelectType (event) {
      this.formData.vehicleSourceType = event.target.value
    },
    resetData () {
      this.$store.commit('resetOrderManagementBgOrderFormData')
    },
    getFormData () {
      return this.$refs.dynamicComp.getFormData()
    }
  }
}
</script>
<style lang="less" scoped>
.bgOrderSelectVehiclesMain {
  display: flex;
  flex-direction: column;

  .bgOrderSelectVehiclesMainTop {
    flex: none;
    margin-bottom: 16px;
  }

  .bgOrderSelectVehiclesMainContent {
    flex: 1 0 0;
    min-height: 400px;
  }
}
</style>
